<template>
    <el-dialog v-model="accountFormVisible" title="账号绑定" :rules="rules" width="520px" :before-close="handleClose">
        <template v-if="!successShow">
            <div class="account-tip">
                <el-icon color="#2084C6" size="18" class="icon">
                    <WarningFilled />
                </el-icon>
                <div class="desc">您的孚星账号与 [{{ appInfo.name }}] 账号暂未绑定，请您录入 [{{ appInfo.name }}] 账户信息用于账户绑定，绑定成功后，您可通过数字空间直接跳转登录 [{{ appInfo.name }}]</div>
            </div>
            <div class="form-title">{{ appInfo.name }}</div>
            <el-form :model="form" class="form" ref="formRef">
                <el-form-item label="账号：" class="input">
                    <el-input v-model="form.account" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="密码：" class="input">
                    <el-input v-model="form.password" type="password" autocomplete="off" />
                </el-form-item>
            </el-form>
        </template>
        <template v-if="!successShow" #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submitForm()" :loading="isSaveLoading">
                账号绑定
                </el-button>
            </span>
        </template>
        <div v-if="successShow" class="success-box">
            <el-icon class="success-icon" color="#1EB294"><CircleCheckFilled/></el-icon>
            <div class="success-text">账号绑定成功</div>
            <el-button type="primary" @click="handleHref">前往绿色产品评价平台</el-button>
        </div>
    </el-dialog>
</template>
<script lang="ts" setup>
import type { ElMessage, FormInstance } from 'element-plus';
import { reactive, ref } from 'vue';

const formRef = ref<FormInstance>()
const isSaveLoading = ref(false);
const successShow = ref(false)
const accountFormVisible = ref(false)
const appInfo = ref()

const init = (info: any) => {
    accountFormVisible.value = true
    appInfo.value = info
}

defineExpose({
  init
})

const form = reactive({
  account: '',
  password: '',
  id: 0
})

const rules = reactive({
  account: [{ trigger: 'blur', required: true }],
  password: [{ trigger: 'blur', required: true }],
})

const handleClose = () => {
    accountFormVisible.value = false
    appInfo.value = {}
    successShow.value = false
}

const submitForm = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {    
        saveForm()
        console.log('submit!')
    } else {
        console.log('error submit!')
        return false
    }
  })
}

const saveForm = () => {
    isSaveLoading.value = true;
    // 提交账户
    let params = form
    params.id = appInfo.value.id
    // const res = await accountBind(params)
    isSaveLoading.value = false;
    ElMessage({
        message: '认证成功.',
        type: 'success',
    })
    successShow.value = true
}

const handleHref = () => {
    window.open(appInfo.value.link, '_blank')
}


</script>
<style lang='scss' scoped>
$textColor: #262626;
.account-tip {
    margin: 0 16px 16px 16px;
    background: #D0ECF1;
    border-radius: 3px;
    padding: 16px;
    display: flex;
    .icon {
        padding: 1px;
    }
    .desc {
        font-size: 12px;
        font-weight: 400;
        color: #092C34;
        padding-left: 8px;
    }
}
.form-title {
    margin: 16px 32px;
    font-weight: 500;
    color: $textColor;
    line-height: 20px;
    font-size: 13px;
}
.form {
    margin-left: 72px;
    font-size: 13px;
    color: $textColor;
    .input {
        width: 320px;
        margin-left: 0px !important;
    }
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
.success-box {
    text-align: center;
    padding-bottom: 50px;
    .success-icon {
        font-size: 70px;
    }
    .success-text {
        font-size: 24px;
        font-weight: 600;
        color: #262626;
        line-height: 32px;
        padding: 30px 0;
    }
}
</style>